<template>
  <el-container>
    <vHeadSpace />
    <el-container>
      <vAsideSpace />
      <el-container>
        <el-main class="monitor_main">
          <div class="monitor_content">
            <h2 style="text-align: center;margin-top:0;margin-bottom: 0;font-size: 1.5rem;font-weight: bolder">设备监控</h2>
            <div style="text-align: center">当前监控设备: 一共监控了{{all_hosts}}台设备</div>
            <!--<el-dialog
                    :title="name_of_current_host"
                    :visible.sync="dialogVisible"
                    width="55%"
                    class="abow_dialog"
                    destroy-on-close
            >
              <div>
                <el-table
                        v-loading="monitorLoading"
                        :data="monitorData"
                        style="width: 100%;margin-bottom: 20px;">
                  <el-table-column type="expand">
                    <template slot-scope="props">
                      <el-table
                              :data="props.row.result"
                              border>
                        <el-table-column
                                prop="name"
                                label="名称"
                                width="220">
                        </el-table-column>
                        <el-table-column
                                prop="lastvalue"
                                label="最新数据">
                        </el-table-column>
                        <el-table-column
                                prop="changevalue"
                                label="更改">
                        </el-table-column>
                      </el-table>
                    </template>
                  </el-table-column>
                  <el-table-column
                          prop="applicationname"
                          label="名称"
                          sortable
                          width="180">
                  </el-table-column>
                  <el-table-column
                          prop="updateTime"
                          label="最新检查记录">
                  </el-table-column>
                </el-table>

              </div>
              <div>

              </div>
              <span slot="footer" class="dialservog-footer">
                <el-button type="primary" @click="pageJump('basicMonitoringEquipment', {'hostid': id_of_current_host})">查看图形</el-button>
          </span>
            </el-dialog>-->
            <el-dialog
                    title="请选择接口"
                    :visible.sync="interface_dialogVisible"
                    width="30%"
                    destroy-on-close>
              <div>
                <el-select v-model="interfaces_selected" placeholder="请选择" style="margin-left: 60px">
                  <el-option
                          v-for="item in interfaces_of_snmp"
                          :key="item.name"
                          :label="item.name"
                          :value="item.name">
                  </el-option>
                </el-select>
                <el-button type="success" style="margin-left: 20px" @click="pageJump('detailedFlowChart', {'itemName': interfaces_selected, 'type': avail, 'hostId': id_of_current_host})">查询</el-button>
              </div>
            </el-dialog>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick()" >
              <el-tab-pane label="服务器" name="zabbix">
                <el-table
                        v-loading="isLoading"
                        :data="details_of_hosts_currentPage"
                        :header-cell-style="{'text-align':'center'}"
                        @filter-change="filterChangeZABBIX"
                        width="100%"
                        :height="tableHeight">
                  <el-table-column
                          label="设备名称"
                          width="120"
                          align="center">
                    <template slot-scope="scope">
                      <el-popover
                              placement="top-start"
                              width="250"
                              trigger="hover"
                              :content="hardware_info">
                <span slot="reference" @mouseover="show(scope.row.hostid)"
                      :style="fontColorShow(scope.row.avail)"> {{scope.row.hostname}}</span>
                      </el-popover>
                    </template>

                  </el-table-column>

                  <el-table-column
                          prop="ip"
                          label="设备接口"
                          width="145">
                    <template slot-scope="scope">
                      <div :style="fontColorShow(scope.row.avail)" @click="showAvailable(scope.row)">{{scope.row.ip}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                          label="设备类型"
                          width="240">
                    <template slot-scope="scope">
                      <div class="itemInfo-middle-type">
                        <div :style="{background:scope.row.avail === 'ZBX' ? 'green' : scope.row.avail === 'ZBX不可用' ? 'red' : ''}" class="itemInfo-middle-type-first">服务器</div>
                        <div :style="{background:scope.row.avail === 'SNMP' ? 'green' : scope.row.avail === 'SNMP不可用' ? 'red' : ''}">交换机</div>
                        <div :style="{background:scope.row.avail === 'JMX' ? 'green' : scope.row.avail === 'JMX不可用' ? 'red' : ''}">防火墙</div>
                        <div :style="{background:scope.row.avail === 'IPMI' ? 'green' : scope.row.avail === 'IPMI不可用' ? 'red' : ''}" class="itemInfo-middle-type-last">单向网闸</div>
                      </div>
                    </template>

                  </el-table-column>
                  <el-table-column
                          label="设备状态"
                          prop="available"
                          column-key="available"
                          width="90"
                          :filters="[{value: '可用', text: '可用'},{value: '不可用', text: '不可用'}]">
                    <template slot-scope="scope">
                      <el-tag
                              :type="scope.row.available === '可用' ? 'success' : 'danger' "
                      >{{scope.row.available}}</el-tag>
                    </template>
                  </el-table-column>
                  <!--<el-table-column
                          label="监控指标"
                          show-overflow-tooltip>
                    <template slot-scope="scope">
                      <el-button type="text" @click="openMonitor(scope.row)">监控指标</el-button>
                    </template>
                  </el-table-column>-->
                  <!--          <el-table-column-->
                  <!--                  prop="specification"-->
                  <!--                  label="规格">-->
                  <!--          </el-table-column>-->
                  <el-table-column
                          prop="clock"
                          label="最近更新时间"
                          width="120">
                    <template slot-scope="scope" :style="fontColorShow(scope.row.avail)">
                      <div v-if="isAvailable(scope.row.avail)">
                        <div style="text-align: center">{{handleDate(scope.row.clock)}}</div>
                        <div style="text-align: center">{{handleTime(scope.row.clock)}}</div>
                      </div>
                      <div v-else :style="fontColorShow(scope.row.avail)">
                        --- ---
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                          label="CPU利用率"
                          align="center">
                    <template slot-scope="scope">
                      <div v-if="isAvailable(scope.row.avail)">
                        <el-progress :percentage="scope.row.CPUUtilization" :color="customColorMethod" :format="Textformat(scope.row.item.CPUUtilization)" :stroke-width="3"></el-progress>
                      </div>
                      <div v-else :style="fontColorShow(scope.row.avail)">
                        --- ---
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                          label="内存利用率"
                          align="center">
                    <template slot-scope="scope">
                      <div v-if="isAvailable(scope.row.avail)">
                        <el-progress :percentage="scope.row.MemoryUtilization" :color="customColorMethod" :format="Textformat(scope.row.item.MemoryUtilization)" :stroke-width="3"></el-progress>
                      </div>
                      <div v-else :style="fontColorShow(scope.row.avail)">
                        --- ---
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                          label="磁盘利用率"
                          align="center">
                    <template slot-scope="scope">
                      <div v-if="isAvailable(scope.row.avail)">
                        <el-progress :percentage="scope.row.DiskUtilization" :color="customColorMethod" :format="Textformat(scope.row.item.DiskUtilization)" :stroke-width="3"></el-progress>
                      </div>
                      <div v-else :style="fontColorShow(scope.row.avail)">
                        --- ---
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                          label="磁盘IO速率(写/读)"
                          width="150">
                    <template slot-scope="scope">
                      <div :style="fontColorShow(scope.row.avail)">{{scope.row.DiskWriterate}}</div>
                      <div :style="fontColorShow(scope.row.avail)">{{scope.row.DiskReadrate}}</div>
                    </template>
                  </el-table-column>
                  <!--          <el-table-column-->
                  <!--                  label="网络IO速率(入/出)"-->
                  <!--                  width="120">-->
                  <!--            <template slot-scope="scope">-->
                  <!--              <div>{{scope.row.receivebit}}</div>-->
                  <!--              <div>{{scope.row.sentbit}}</div>-->
                  <!--            </template>-->
                  <!--          </el-table-column>-->
                  <el-table-column
                          prop="status"
                          label="实时流量图"
                          width="90">
                    <template slot-scope="scope">
                      <div v-if="isAvailable(scope.row.avail)">
                        <el-button type="text" @click="flowChart_pageJump(scope.row)" >查看详情
                        </el-button>
                      </div>
                      <div v-else :style="fontColorShow(scope.row.avail)">
                        --- ---
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                          prop="status"
                          label="系统日志"
                          width="80">
                    <template slot-scope="scope">
                      <div v-if="isAvailable(scope.row.avail)">
                        <el-button type="text" @click="log_pageJump(scope.row)" >日志详情
                        </el-button>
                      </div>
                      <div v-else :style="fontColorShow(scope.row.avail)">
                        --- ---
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                          label="设备详情"
                          width="80">
                    <template slot-scope="scope">
                      <div v-if="isAvailable(scope.row.avail)">
                        <el-button type="text" @click="basic_pageJump(scope.row)" >设备详情
                        </el-button>
                      </div>
                      <div v-else :style="fontColorShow(scope.row.avail)">
                        --- ---
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                        class="monitor_pagination"
                        :current-page.sync="currentPage"
                        :page-sizes="[5, 8, 10]"
                        :page-size="a_pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="all_hosts"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        v-if="all_hosts != 0">
                </el-pagination>
              </el-tab-pane>
              <el-tab-pane label="网络设备" name="snmp">
                <el-table
                        v-loading="isLoading"
                        :data="details_of_hosts_currentPage"
                        style="width: 100%"
                        :height="tableHeight"
                        @filter-change="filterChangeSNMP"
                        :header-cell-style="{'text-align':'center'}"> //这里设置表头居中
                  <el-table-column
                          label="设备名称"
                          width="125"
                          align="center">
                    <template slot-scope="scope">
                      <!--trigger="hover"-->
                      <!--@click="showAvailable(scope.row.clock)"-->
                      <!--<el-popover-->
                      <!--        placement="top-start"-->
                      <!--        width="250"-->
                      <!--        :content="hardware_info">-->
                        <span  slot="reference"  :style="fontColorShow(scope.row.avail)"> {{scope.row.hostname}}</span>
                      <!--</el-popover>-->
                    </template>

                  </el-table-column>

                  <el-table-column
                          prop="ip"
                          label="设备接口"
                          width="125"
                          align="center">
                    <template slot-scope="scope">
                      <div :style="fontColorShow(scope.row.avail)" @click="showAvailable(scope.row)">{{scope.row.ip}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                          label="设备类型"
                          width="250"
                          align="center">
                    <template slot-scope="scope">
                      <div class="itemInfo-middle-type">
                        <div :style="{background:scope.row.avail === 'ZBX' ? 'green' : scope.row.avail === 'ZBX不可用' ? 'red' : ''}" class="itemInfo-middle-type-first">服务器</div>
                        <div :style="{background:isAvailSwitch(scope.row)}">交换机</div>
                        <div :style="{background:isAvailNetFilter(scope.row)}">防火墙</div>
                        <div :style="{background:isAvailSingleGate(scope.row)}" class="itemInfo-middle-type-last">单向网闸</div>
                      </div>
                    </template>

                  </el-table-column>
                  <el-table-column
                          label="设备状态"
                          prop="available"
                          column-key="available"
                          width="90"
                          align="center"
                          :filters="[{value: '可用', text: '可用'},{value: '不可用', text: '不可用'}]">
                    <template slot-scope="scope">
                      <el-tag
                              :type="scope.row.available === '可用' ? 'success' : 'danger' "
                      >{{scope.row.available}}</el-tag>
                    </template>
                  </el-table-column>
                  <!--<el-table-column
                          label="监控指标"
                          show-overflow-tooltip>
                    <template slot-scope="scope">
                      <el-button type="text" @click="openMonitor(scope.row)">监控指标</el-button>
                    </template>
                  </el-table-column>-->
                  <!--          <el-table-column-->
                  <!--                  prop="specification"-->
                  <!--                  label="规格">-->
                  <!--          </el-table-column>-->
                  <el-table-column
                          prop="clock"
                          width="120"
                          label="最近更新时间"
                          align="center">
                    <template slot-scope="scope" :style="fontColorShow(scope.row.avail)">
                      <div v-if="isAvailable(scope.row.avail)">
                        <div style="text-align: center">{{handleDate(scope.row.clock)}}</div>
                        <div style="text-align: center">{{handleTime(scope.row.clock)}}</div>
                      </div>
                      <div v-else :style="fontColorShow(scope.row.avail)">
                        --- ---
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                          label="CPU利用率"
                          align="center">
                    <template slot-scope="scope">
                      <div v-if="isAvailable(scope.row.avail)">
                        <el-progress :percentage="scope.row.CPUUtilization" :color="customColorMethod" :format="Textformat(scope.row.item.CPUUtilization)" :stroke-width="3"></el-progress>
                      </div>
                      <div v-else :style="fontColorShow(scope.row.avail)">
                        --- ---
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                          label="内存利用率"
                          align="center">
                    <template slot-scope="scope">
                      <div v-if="isAvailable(scope.row.avail)">
                        <el-progress :percentage="scope.row.MemoryUtilization" :color="customColorMethod" :format="Textformat(scope.row.item.MemoryUtilization)" :stroke-width="3"></el-progress>
                      </div>
                      <div v-else :style="fontColorShow(scope.row.avail)">
                        --- ---
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                          prop="status"
                          label="实时流量图"
                          align="center"
                          width="90">
                    <template slot-scope="scope">
                      <div v-if="isAvailable(scope.row.avail)">
                        <el-button type="text" @click="flowChart_pageJump(scope.row)" >查看详情
                        </el-button>
                      </div>
                      <div v-else :style="fontColorShow(scope.row.avail)">
                        --- ---
                      </div>
                    </template>
                  </el-table-column>
                  <!--          <el-table-column-->
                  <!--                  prop="status"-->
                  <!--                  label="系统日志">-->
                  <!--            <template slot-scope="scope">-->
                  <!--              <el-button type="text" @click="log_pageJump(scope.row)">日志详情-->
                  <!--              </el-button>-->
                  <!--            </template>-->
                  <!--          </el-table-column>-->
                  <el-table-column
                          label="设备详情"
                          align="center"
                          width="78">
                    <template slot-scope="scope">
                      <!--              <el-button type="text" @click="basic_pageJump(scope.row)" >-->
                      <!--              </el-button>-->
                      <div v-if="isAvailable(scope.row.avail)">
                        <el-button type="text" @click="basic_pageJump(scope.row)" >设备详情
                        </el-button>
                      </div>
                      <div v-else :style="fontColorShow(scope.row.avail)">
                        --- ---
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                        class="monitor_pagination"
                        :current-page.sync="currentPage"
                        :page-sizes="[6, 8, 10]"
                        :page-size="a_pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="all_hosts"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        v-if="all_hosts != 0">
                </el-pagination>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-main>
        <vFootSpace/>
      </el-container>
    </el-container>
  </el-container>
</template>


<script>
  import axios from 'axios'
  export default {
    provide() {
      return {
        reloadAll: this.reloadAll,
      }
    },
    data() {
      return {
        tableHeight: 0.67*document.body.clientHeight,
        activeName: 'zabbix', // tab 标签默认值
        all_hosts: 0, // 监控主机数量
        details_of_hosts_currentPage: [], // 当前页数据
        a_pageSize: 5, // 控制当前页显示数据的数量
        currentPage: 1, // 当前页
        isLoading: false, // 正在加载
        direction: 'ttb',
        current_host_id: '',
        dialogVisible: false, // 显示监控项dialog
        interface_dialogVisible: false, // 显示SNMP接口选择图dialog
        tagType: 'success',
        monitorData: [],
        isRouterAlive: true,
        status: '',
        availabe: '',
        monitorLoading: false,
        hostid: "",
        host: "",
        selectedItemIds: [],
        itemList: [],
        hostSate: {},
        avail:'',
        pageShow: true,
        name_of_current_host: '', // 具体监控项中显示主机的名字
        id_of_current_host: 0, // 方便页面跳转传值
        interfaces_of_snmp: [], // 可供用户选择的接口
        interfaces_selected: '',
        name_of_title: '', //监控设备页面的title
        ava_text: '', //dashboard->monitoroverview的可用性参数
        hardware_info: '暂无数据',
        agent_type: '',
        customColor: '#409eff',
        customColors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ],
        filtersValue: [
          {value: '可用', text: '可用'},
          {value: '不可用', text: '不可用'}
          ],
        inventory: []
      }
    },

    mounted() {
      this.isLoading = true;
      var pageNo = Math.round(this.$route.query.pageNo);
      var type = Math.round(this.$route.query.type);
      if (pageNo) {
        if (type === 1) {
          this.activeName = 'snmp'
        }
        this.handleCurrentChange(pageNo)
      }

    },

    /**
     * 生命周期函数获取监控设备的信息
     */
    created() {
      if (this.activeName === 'zabbix'){
        console.log("hha")
        let value = this.$route.query.text
        if (value == "可用" || value == "不可用" ){
          this.axios_fun(0,value)
        }else {
          this.axios_fun(0,"")
        }
      } else{
        this.axios_fun(1,"")
      }
    },



    methods: {
      handleClick(){
        this.currentPage = 1;
        if (this.activeName === 'zabbix'){
          this.axios_fun(0,"")
        } else{
          this.axios_fun(1,"")
        }

      },
      // 进度条进度显示
      Textformat(value){
        let realVal = parseFloat(value).toFixed(2)
        return () => {
          if (realVal >= 0.00 && realVal <= 100){
            return `${realVal}%`
          }else {
            return '0.00%'
          }
        }
      },

      // 控制进度条颜色
      customColorMethod(percentage){
        if (percentage < 30) {
          return '#67c23a';
        } else if (percentage < 70) {
          return '#e6a23c';
        } else {
          return '#C2210E';
        }
      },
      // 显示主机硬件信息
      show(hostid){
        axios({
          method: 'post',
          url: '/monitor/get_hardware.action',
          data: {
            hostId: hostid,
            itemName: 'Number of CPUs,Total memory,Number of cores'
          }
        }).then( (res) =>{
          this.hardware_info = 'CPU核数: ' + res.data.content.result[0].numberOfCPUs + '' + '\n总内存: ' + res.data.content.result[1].totalMemory;
        })
      },
      axios_fun(hostType,status){
        // console.log(hostType)
        // console.log(this.currentPage)
        this.isLoading = true
        axios({
          method: 'post',
          url: '/monitor/getHostListLogic.action',
          data: {
            pageNo: this.currentPage,
            pageSize: this.a_pageSize,
            hostType: hostType,
            status: status
          }
        }).then((res) => {
          console.log("axios_fun结果")
          console.log(res)
          this.all_hosts = res.data.content.count;
          this.handleItem(res.data.content.result);
          this.isLoading = false;
        });
      },
      axios_fun_flash(hostType,status){
        console.log(hostType)
        this.isLoading = true
        this.currentPage = 1,
        axios({
          method: 'post',
          url: '/monitor/getHostListLogic.action',
          data: {
            pageNo: "1",
            pageSize: this.a_pageSize,
            hostType: hostType,
            status: status
          }
        }).then((res) => {
          console.log("axios_fun结果")
          console.log(res)
          this.all_hosts = res.data.content.count;
          this.handleItem(res.data.content.result);
          this.isLoading = false;
        });
      },
      handleItem(detailsHost){
        this.details_of_hosts_currentPage = detailsHost;

        console.log(this.details_of_hosts_currentPage);

        for (let i = 0; i < detailsHost.length; i++) {
          this.details_of_hosts_currentPage[i].inventory = detailsHost[i].inventory.notes;
            if (detailsHost[i].item !== '暂未配置相关监控项') {
            this.details_of_hosts_currentPage[i].CPUUtilization = Math.round(detailsHost[i].item.CPUUtilization);
            let sysname = detailsHost[i].item.systemName;
            if (sysname !== undefined) {
              if(sysname.includes('Windows 10') || sysname.includes('Windows 7') || (detailsHost[i].item.DiskReadrate == '' && detailsHost[i].item.DiskWriterate == '')) {
                this.details_of_hosts_currentPage[i].DiskReadrate = detailsHost[i].item.DiskReadrateWindows;
              }else {
                this.details_of_hosts_currentPage[i].DiskReadrate = detailsHost[i].item.DiskReadrate;
              }
              if(sysname.includes('Windows 10') || sysname.includes('Windows 7') || (detailsHost[i].item.DiskReadrate == '' && detailsHost[i].item.DiskWriterate == '')) {
                this.details_of_hosts_currentPage[i].DiskWriterate = detailsHost[i].item.DiskWriterateWindows;
              }else {
                this.details_of_hosts_currentPage[i].DiskWriterate = detailsHost[i].item.DiskWriterate;
              }
            }
            this.details_of_hosts_currentPage[i].DiskUtilization = Math.round(detailsHost[i].item.DiskUtilization);
            this.details_of_hosts_currentPage[i].MemoryUtilization = Math.round(detailsHost[i].item.MemoryUtilization);
            this.details_of_hosts_currentPage[i].receivebit = detailsHost[i].item.receivebit;
            this.details_of_hosts_currentPage[i].sentbit = detailsHost[i].item.sentbit;
            // this.details_of_hosts_currentPage[i].specification = detailsHost[i].item.specification;
            this.details_of_hosts_currentPage[i].clock = detailsHost[i].item.clock;
            //获得资产清单中的项
          }
          else {
          }
        }

      },
      // ass(availabe) {
      //   console.log(availabe);
      //   let url_address = '';
      //   if(availabe === ''){
      //     url_address = '/monitor/get_host_list.action';
      //   }
      //   else if(availabe === '可用'){
      //     url_address ='/monitor/get_avail_host_list.action';
      //   }
      //   else {
      //     url_address = '/monitor/get_unavail_host_list.action';
      //   }
      //   this.axios_fun(availabe,url_address);
      // },
      basic_pageJump(host){
        console.log('pageNo'+ this.currentPage)
        if (this.activeName === 'zabbix'){
          this.pageJump('basicMonitoring',{'hostid':host.hostid, 'pageNo': this.currentPage,'type': 0})
        }else {
          this.pageJump('basicMonitoring',{'hostid':host.hostid, 'pageNo': this.currentPage,'type': 1})
        }

      },
      log_pageJump(host) {
        // 获取类型
        let curType = this.isType(host)
        // 跳转页面
        this.pageJump('logDetails', {'hostId': host.hostid,'hostname':host.hostname,'cur_type':curType});
      },
      /*
      * ZBX流量图页面跳转以及发送请求, SNMP弹出框显示可供选择的接口
      * */
      flowChart_pageJump(host) {
        this.avail = host.avail;
        this.id_of_current_host = host.hostid;
        // 发送请求
        if (host.avail === 'SNMP' || host.avail === 'SNMP不可用'){
          axios.post('/monitor/get_net_by_host_id.action', {
            type: 2,
            hostId: host.hostid
          }).then( response =>{
            this.interfaces_of_snmp = response.data.content.result;
            this.interface_dialogVisible = true;
          })
        } else {
          // 跳转页面
          this.pageJump('detailedFlowChart', {'hostId': host.hostid, 'type': host.avail});
        }
      },


      /*
      * 处理各种页面跳转
      *
      * */
      pageJump(url, data) {
        this.$router.push({path: url, query: data })
      },

      reloadAll() {
        this.isRouterAlive = false;
        this.$nextTick(() => {
          this.isRouterAlive = true
        })
      },

      filterChangeZABBIX(filterObj){
        console.log(filterObj)
        let flag = ""
       if (filterObj.available.length == 1){
         flag = filterObj.available[0]
       }
       this.agent_type = flag;
       this.axios_fun_flash(0,flag)
      },

      filterChangeSNMP(filterObj){
        console.log(filterObj)
        let flag = ""
        if (filterObj.available.length == 1){
          flag = filterObj.available[0]
        }
        this.agent_type = flag;
        this.axios_fun_flash(1,flag)
      },

      // /**
      //  * 表格过滤
      //  * @returns {boolean}
      //  * @param filters
      //  */
      // filterHandler (filters){
      //
      //   this.isLoading = true;
      //   if (!Boolean(filters.status[0])){
      //     this.status = '';
      //   }else {
      //     this.status = filters.status[0];
      //   }
      //
      //
      //   axios({
      //     method: 'post',
      //     url: '/monitor/get_host_list.action',
      //     data: {
      //       pageNo: this.currentPage,
      //       pageSize: this.a_pageSize,
      //       status: this.status
      //     }
      //   }).then( (res) => {
      //
      //     console.log(res.data.content.result);
      //     this.all_hosts = res.data.content.count;
      //     this.details_of_hosts_currentPage = res.data.content.result;
      //     this.isLoading = false;
      //   })
      // },

      /**
       * 更改每页显示页数
       * @param val
       */
      handleSizeChange(val) {
        this.a_pageSize = val;
        // console.log("this.a_pageSize:"+this.a_pageSize);
        // console.log("this.activeName:"+this.activeName);
        if (this.activeName == 'zabbix'){
          this.axios_fun(0,this.agent_type);
        }else {
          this.axios_fun(1,this.agent_type);
        }
        // this.handleSubmit();
      },
      /**
       * 点击上一页下一页的时候重新发请求获取当前页数据
       * @param val
       */
      handleCurrentChange(val) {
        this.currentPage = val;
        this.isLoading = true;
        // console.log('this.currentPage'+this.currentPage);
        // console.log(this.activeName);
        if (this.activeName === 'zabbix'){
          // this.axios_fun(0);
          this.axios_fun(0,this.agent_type)
        } else{
          // this.axios_fun(1);
          this.axios_fun(1,this.agent_type)
        }
      },
      /*
      * 请求当前页数据
      * */
      handleSubmit() {
        axios.post('/monitor/getHostListLogic.action', {
          pageNo: this.currentPage,
          pageSize: this.a_pageSize,
          hostType: this.hostType,
          status: this.status
        }).then((res) => {
          this.all_hosts = res.data.content.count;
          this.details_of_hosts_currentPage = res.data.content.result;
          console.log(this.details_of_hosts_currentPage);
          this.isLoading = false;
        })
      },



/*      /!**
       * 打开监控项dialog的时候执行请求操作
       * @param host
       */
      /*openMonitor(host) {
        this.name_of_current_host = host.hostname + '的监控项';
        this.id_of_current_host = host.hostid;
        this.monitorLoading = true;
        this.dialogVisible = true;
        axios.post("/monitor/get_application_by_hostId_and_ApplicationId.action", {
          hostId: host.hostid
        }).then( (res) => {
          this.monitorData = res.data.content.result;
          for (let i = 0; i < this.monitorData.length; i++) {
            this.monitorData[i]['host_name'] = host.hostname;
            for (let j = 0; j < this.monitorData[i].result.length; j++){
              this.monitorData[i].result[j]['changevalue'] =
                  this.monitorData[i].result[j].lastvalue - this.monitorData[i].result[j].prevvalue;
            }
            if (this.monitorData[i].result.length !== 0){
              this.monitorData[i]['hasChildren'] = true;
            }
          }
          this.monitorLoading = false;
        });
      }*/
      handleDate(timestamp){
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate());
        var ymd = Y+M+D;
        if (ymd == "NaN-NaN-NaN"){
          return '--- ---';
        }
        else {
          return ymd;
        }

      },
      handleTime(timestamp){
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
        var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes()) + ':';
        var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
        var hms = h+m+s;
        if (hms == "NaN:NaN:NaN"){
          return null;
        }
        else{
          return hms;
        }
      },
      // 控制字体颜色
      fontColorShow(avail) {
        if (avail === '未知') {
          return {color: '#D3D3D3'}
        }else if(avail === 'SNMP不可用'){
          return {color: '#D3D3D3'}
        }else if(avail === 'ZBX不可用'){
          return {color: '#D3D3D3'}
        }else if(avail === 'JMX不可用'){
          return {color: '#D3D3D3'}
        }else if(avail === 'IPMI不可用'){
          return {color: '#D3D3D3'}
        }else {
          return {color: '#606266'}
        }
      },
      // 是否可用
      isAvailable(avail) {
        if (avail === '未知') {
          return false
        }else if(avail === 'SNMP不可用'){
          return false
        }else if(avail === 'ZBX不可用'){
          return false
        }else if(avail === 'JMX不可用'){
          return false
        }else if(avail === 'IPMI不可用'){
          return false
        }else {
          return true
        }
      },
      showAvailable(avail) {
        console.log(avail);
      },
      isAvailSwitch(val) {
        if (val.avail === 'SNMP') {
          if (val.inventory === null || val.inventory === '' || val.inventory === 'switch') {
            return 'green'
          }else{
            return ''
          }
        }else if(val.avail === 'SNMP不可用') {
          if (val.inventory === null || val.inventory === '' || val.inventory === 'switch') {
            return 'red'
          }else{
            return ''
          }
        }
      },
      isAvailNetFilter(val) {
        if (val.avail === 'SNMP') {
          if (val.inventory === 'firewall' ) {
            return 'green'
          }else{
            return ''
          }
        }else if(val.avail === 'SNMP不可用') {
          if (val.inventory === 'firewall') {
            return 'red'
          }else{
            return ''
          }
        }
      },
      isAvailSingleGate(val) {
        if (val.avail === 'SNMP') {
          if (val.inventory === 'single_gate' ) {
            return 'green'
          }else{
            return ''
          }
        }else if(val.avail === 'SNMP不可用') {
          if (val.inventory === 'single_gate') {
            return 'red'
          }else{
            return ''
          }
        }
      },
      // 判断类型进行传值
      isType(val) {
        if(val.avail == 'ZBX') {
          return '1'
        }else if (this.isAvailSwitch(val) == 'green') {
          return '2'
        }else if (this.isAvailNetFilter(val) == 'green') {
          return '3'
        }else if (this.isAvailSingleGate(val) == 'green'){
          return '4'
        }else {
          return '0'
        }
      },
    }
  }
</script>
<style scoped>
  .monitor_main {
    padding: 10px;
    height: 89vh;
    width: 100%;
    margin-top: 60px;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .itemInfo-middle-type{
    display: inline;
    line-height: 50px;
  }
  .itemInfo-middle-type div{
    display: inline;
    padding-left: 3px;
    padding-right: 3px;
    height: 30px;
    line-height: 30px;
    color: #d9d9d9;
    border-top: 1px solid #d9d9d9;
    border-left: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
  }
  .itemInfo-middle-type-first{
    border-top-left-radius: 1px;
    border-bottom-left-radius: 1px;
  }
  .itemInfo-middle-type-last{
    border-right: 1px solid #d9d9d9;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .monitor_pagination {
    white-space: nowrap;
    padding: 2px 5px;
    color: #303133;
    text-align: center;
    font-weight: 700;
  }

  el-dialog {
    max-height: 500px;
    overflow: auto;
  }
  .monitor_content{
    margin-top: 0;
    width: 100%;
    height: 97%;
  }
</style>
